<!DOCTYPE html>   {% load static %}
<html lang="en-us" class="layout-pf layout-pf-fixed">
<head>
    <title>主页 - 进程管理</title>

    <!-- 全局js_css -->
    {% include 'public/css_js_plugin.html' %}

    <!-- 当前页所需js -->
    <script src="{% static 'js/jquery.matchHeight-0.7.2-min.js' %}"></script>

</head>

<body class="cards-pf">

<!-- 顶部导航 -->
{% include 'public/__top_navbar-header.html' with request=request %}
<!-- 顶部导航 end-->

<!-- 左侧导航 -->
{% include 'public/__left_navbar.html' %}
<!-- 左侧导航 end-->

<!-- 页面container -->
<div class="container-fluid container-cards-pf container-pf-nav-pf-vertical  hidden-icons-pf">
     {% block content %}
    <div class="row row-cards-pf">  <!-- row -->
        <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="card-pf card-pf-accented card-pf-aggregate-status">
                <h2 class="card-pf-title">
                    <span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">0</span> Ipsum
                </h2>
                <div class="card-pf-body">
                    <p class="card-pf-aggregate-status-notifications">
                        <span class="card-pf-aggregate-status-notification"><a href="#" class="add"
                                                                               data-toggle="tooltip"
                                                                               data-placement="top"
                                                                               title="Add Ipsum"><span
                                class="pficon pficon-add-circle-o"></span></a></span>
                    </p>
                </div>
            </div>

        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
<div class="card-pf card-pf-accented card-pf-aggregate-status">
  <h2 class="card-pf-title">
    <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">20</span> Amet</a>
  </h2>
  <div class="card-pf-body">
    <p class="card-pf-aggregate-status-notifications">
      <span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>
      <span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-warning-triangle-o"></span>1</a></span>
    </p>
  </div>
</div>

        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
<div class="card-pf card-pf-accented card-pf-aggregate-status">
  <h2 class="card-pf-title">
    <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">9</span> Adipiscing</a>
  </h2>
  <div class="card-pf-body">
    <p class="card-pf-aggregate-status-notifications">
      <span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>
    </p>
  </div>
</div>

        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
          <div class="card-pf card-pf-accented card-pf-aggregate-status">
            <h2 class="card-pf-title">
              <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">12</span> Lorem</a>
            </h2>
            <div class="card-pf-body">
              <p class="card-pf-aggregate-status-notifications">
                <a href="#"><span class="card-pf-aggregate-status-notification"><span class="pficon pficon-error-circle-o"></span>1</span></a>
              </p>
            </div>
          </div>
        </div>
      </div><!-- /row -->
 {% endblock content %}
</div>
<!-- 页面container end-->

<script>
  $(document).ready(function() {
    // matchHeight the contents of each .card-pf and then the .card-pf itself
    $(".row-cards-pf > [class*='col'] > .card-pf .card-pf-title").matchHeight();
    $(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-body").matchHeight();
    $(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-footer").matchHeight();
    $(".row-cards-pf > [class*='col'] > .card-pf").matchHeight();

    // Initialize the vertical navigation    初始化垂直导航
    $().setupVerticalNavigation(true);
  });
</script>

<script>
  const currentUrl = new URL(window.location.href);
  const currentEnvironment = currentUrl.searchParams.get('environment');

  if (currentEnvironment === 'regressions') {
    let verticalNavEl = document.querySelector('div.nav-pf-vertical');
    let ipsumEl = document.querySelector('[data-target="#ipsum-secondary"]');
    let tertiaryNavItemEl = document.querySelector('.list-group-item.active.tertiary-nav-item-pf')
    verticalNavEl.className = `${verticalNavEl.className} nav-pf-vertical-with-submenus hidden-icons-pf hover-secondary-nav-pf hover-tertiary-nav-pf`;
    ipsumEl.className = `${ipsumEl.className} is-hover`;
    tertiaryNavItemEl.className = `${tertiaryNavItemEl.className} is-hover`;
  }
</script>

  </body>
</html>
